<template>
  <div class="container">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <div class="mainContent">
        <el-row class="mainContentC" :gutter="29">
          <!-- 项目指标 -->
          <el-col :span="5" class="projectZb">
            <ul>
              <li
                v-for="(item, index) in tagList"
                :key="index"
                @click="chooseCheck(index, item)"
                :class="{ selected: flag == index }"
              >
                {{ index + 1 }}.{{ item.name }}
              </li>
            </ul>
          </el-col>
          <!-- 指标配置 -->
          <el-col :span="19" class="projectZbEdit">
            <el-form
              :model="formData"
              label-width="122px"
              :rules="formRules"
              ref="formData"
              class="form"
            >
              <el-row class="row-padding-bottom">
                <el-col :span="24" class="col-position">
                  <el-form-item label="指标编号">
                    <span class="color666">{{ formData.number }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-padding-bottom">
                <el-col :span="24" class="col-position">
                  <el-form-item label="指标名称" prop="zbName">
                    <el-input
                      v-model.trim="formData.zbName"
                      placeholder="请输入指标名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-padding-bottom">
                <el-col :span="24" class="col-position">
                  <el-form-item label="指标维度" prop="dimId">
                    <el-select
                      v-model="formData.dimId"
                      clearable
                      filterable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-padding-bottom">
                <el-form-item label="评价标准" prop="reason">
                  <el-input
                    type="textarea"
                    v-model.trim="formData.reason"
                    autocomplete="off"
                    placeholder="请输入评价标准"
                    maxlength="500"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row class="row-padding-bottom">
                <el-col :span="24" class="col-position">
                  <el-form-item label="修复方式" prop="content" class="content">
                    <!-- 富文本编辑器 -->
                    <UE
                      :id="id"
                      :config="config"
                      ref="ue"
                      class="ueditorBox"
                      v-on:ready="ready"
                      v-bind:value="defaultMsg"
                      v-on:input="input"
                    ></UE>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="row-padding-bottom operateBtns">
                <el-col :span="24" class="col-position">
                  <el-form-item>
                    <el-button
                      class="commonBut saveBtn"
                      @click="saveUpdate"
                      v-if="isShowSave"
                      >保存</el-button
                    >
                    <el-button
                      class="commonBut"
                      v-else
                      type="info"
                      plain
                      disabled
                      >保存</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import UE from '@/components/publicCom/ueditor.vue'

export default {
  name: 'indexConfiguration',
  components: {
    UE,
  },
  data() {
    var checkContent = (rule, value, callback) => {
      var that = this
      setTimeout(function () {
        if (!that.$refs.ue.getUEContent()) {
          return callback(new Error('请添加修复方式'))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      titleText: '指标配置',
      // 初始化Ueditor配置参数
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 300,
        autoHeightEnabled: false, //高度自适应
        // wordCount:false, //是否开启字数统计
        enableAutoSave: false, //自动保存功能
      },
      id: 'containerZb',
      defaultMsg: '', //富文本编辑器初始数据
      flag: -1,
      tagList: [],
      options: [],
      formData: {
        number: '', //指标编号
        zbName: '', //指标名称
        dimId: '', //指标维度
        reason: '', //评价标准
        content: '', //修复方式
      },
      formRules: {
        zbName: [
          {
            required: true,
            message: '请选择指标名称',
            trigger: 'change',
          },
        ],
        dimId: [
          {
            required: true,
            message: '请选择指标维度',
            trigger: 'change',
          },
        ],
        reason: [
          {
            required: true,
            message: '评价标准不能为空',
            trigger: 'change',
          },
        ],
        content: [
          {
            required: true,
            validator: checkContent,
            trigger: 'blur',
          },
        ],
      },
      currentIndex: '', //当前选中的索引
      isShowSave: '',
    }
  },
  created() {
    //一进页面默认第一个选中
    this.getIndexes(0)
    //指标维度下拉框
    this.getFindbytype()
    this.isShowSave =
      this.$store.state.buttonLimitsArr.indexOf('indexConfig:update') > -1
  },
  mounted() {},
  methods: {
    getIndexes(index) {
      this.axios({
        method: 'post',
        url: 'api-ps/projectindex/expand/indexes',
      })
        .then((res) => {
          var result = res.data.result
          this.tagList = result
          this.formData.number = result['' + index + ''].id
          this.formData.zbName = result['' + index + ''].name
          this.formData.dimId = result['' + index + ''].dimId
          this.formData.reason = result['' + index + ''].reason
          this.defaultMsg = result['' + index + ''].tips || ''
          this.chooseCheck(index)
        })
        .catch((error) => {})
    },
    getFindbytype() {
      this.axios({
        method: 'post',
        url: 'api-ps/projectdim/expand/dims',
      })
        .then((res) => {
          this.options = res.data.result
        })
        .catch((error) => {})
    },
    chooseCheck(index, item) {
      // console.log("item",item);
      this.flag = index
      this.currentIndex = index
      this.formData.number = item.id
      this.formData.zbName = item.name
      this.formData.dimId = item.dimId
      this.formData.reason = item.reason
      this.defaultMsg = item.tips || ''
    },
    ready() {
      // 初始化成功
    },
    input(obj) {
      // 编辑器内容有变动，具体处理自行修改
    },
    saveUpdate() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.toSave()
        } else {
          return false
        }
      })
    },
    toSave() {
      var data = {
        id: this.formData.number,
        name: this.formData.zbName,
        dimId: this.formData.dimId,
        reason: this.formData.reason,
        tips: this.$refs.ue.getUEContent(),
      }
      this.axios({
        method: 'post',
        url: 'api-ps/projectindex/expand/update',
        data: data,
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '修改成功',
                type: 'success',
              })
              //修改成功，默认当前选中
              setTimeout(() => {
                this.getIndexes(this.currentIndex)
              }, 1000)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.$message({
              message: '保存失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {
          this.$message.error('修改失败')
        })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
  padding: 24px;
  .projectZb {
    /* width: 240px; */
    min-height: 604px;
    /* background: #ebf0f5; */
    background: #f5f7fb;
    padding: 10px;
    overflow-y: auto;
    ul li {
      padding: 9px;
      font-size: 14px;
      color: #333333;
      cursor: pointer;
      &:hover {
        color: #009588;
        text-decoration: underline;
      }
    }
    .selected {
      /* background: #E4EBF1; */
      color: #009588;
      font-weight: bold;
    }
  }
  .projectZbEdit {
    padding: 24px;
    height: 100%;
  }
  .mainContent {
    height: 90%;
    .mainContentC {
      height: 90%;
      margin-left: 0 !important;
    }
  }
  /deep/ .ueditorBox {
    line-height: 20px;
  }
  .content /deep/ #containerZb /deep/ .edui-default .edui-editor-breadcrumb {
    display: none;
  }
  /deep/ .el-form-item__label {
    color: #333;
  }
  /deep/ .el-form {
    .el-input__inner {
      width: 340px;
    }
  }
}
</style>
